<#assign basePath=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户角色分配</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="${basePath}/js/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="${basePath}/js/jquery1.8.3.min.js"></script>
    <script src="${basePath}/js/layer/layer.js"></script>
    <script src="${basePath}/js/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="${basePath}/js/shiro.demo.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <form style="margin-top: 1.5em" method="post" action="${basePath}/user/userBoList" id="formId"
                  class="form-inline">
                <div clss="well">
                    <div class="form-group">
                        <input type="text" class="form-control" style="width: 300px;" value="${userRoleBo.nickname?default('')}"
                               name="nickname" id="nickname" placeholder="输入用户昵称 / 用户帐号">
                    </div>
                    <span class=""> <#--pull-right -->
                        <button type="submit" class="btn btn-primary">查询</button>
                       <button type="button" id="deleteAll" class="btn  btn-danger">清空用户角色</button>
                    </span>
                </div>

                <hr>
                <table class="table table-bordered">
                    <input type="hidden" id="selectUserId">
                    <tr>
                        <th width="5%"><input type="checkbox" id="checkAll"/></th>
                        <th width="10%">用户昵称</th>
                        <th width="10%">Email/帐号</th>
                        <th width="10%">状态</th>
                        <th width="55%">拥有的角色</th>
                        <th width="10%">操作</th>
                    </tr>


                    <#if page?exists && page.result?size gt 0 >
                        <#list page.result as it>
                        <tr>
                            <td><input value="${it.id}" check='box' type="checkbox" /></td>
                            <td>${it.nickname}</td>
                            <td>${it.email}</td>
                            <td>${(it.status==1)?string('有效','禁止')}</td>
                            <td roleIds="${it.roleIds?default('')}">${it.roleNames?default('-')}</td>
                            <td>
                                    <i class="glyphicon glyphicon-share-alt"></i><a href="javascript:selectRoleById(${it.id});">选择角色</a>
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </table>
                <#if page?exists>
                <div class="pagination pull-right">
                    ${page.pageHtml}
                </div>
                </#if>
            </form>
        </div>
    </div>


<#--弹框-->
    <div class="modal fade bs-example-modal-sm"  id="selectRole" tabindex="-1" role="dialog" aria-labelledby="selectRoleLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="selectRoleLabel">添加角色</h4>
                </div>
                <div class="modal-body">
                    <form id="boxRoleForm">
                        loading...
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" onclick="selectRole();" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
<#--/弹框-->

</div>
</body>
<script>
    so.init(function () {
        //初始化全选
        so.checkBoxInit('#checkAll', '[check=box]');
        //全选
        so.id('deleteAll').on('click', function () {
            var checkeds = $('[check=box]:checked');
            if (!checkeds.length) {
                return layer.msg('请选择要清除的用户', so.default), !0;
            }
            var array = [];
            checkeds.each(function () {
                array.push(this.value);
            });
            return deleteById(array);
        });
    });
    <#--根据ID数组清空用户的角色-->
    function deleteById(ids) {
        var index = layer.confirm("确定清除这" + ids.length + "个用户的角色？", function () {
            var load = layer.load();
            $.post('${basePath}/user/clearRoleByUserIds', {userIds: ids.join(',')}, function (result) {
                layer.close(load);
                if (result && result.status != 200) {
                    return layer.msg(result.message, so.default), !0;
                } else {
                    layer.msg(result.message);
                    setTimeout(function () {
                        $('#formId').submit();
                    }, 1000);
                }
            }, 'json');
            layer.close(index);
        });
    }
    <#--选择角色后保存-->
    function selectRole() {
        var checked = $("#boxRoleForm  :checked");
        var ids = [], names = [];
        $.each(checked, function () {
            ids.push(this.id);
            names.push($.trim($(this).attr('name')));
        });
        var index = layer.confirm("确定操作？", function () {
        <#--loding-->
            var load = layer.load();
            $.post('${basePath}/user/addRole2User', {
                ids: ids.join(','),
                userId: $('#selectUserId').val()
            }, function (result) {
                layer.close(load);
                if (result && result.status != 200) {
                    return layer.msg(result.message, so.default), !1;
                }
                layer.msg('添加成功');
                setTimeout(function () {
                    $('#formId').submit();
                }, 1000);
            }, 'json');
        });
    }

    /*
    *根据角色ID选择权限，分配权限操作
    */
    function selectRoleById(id) {
        var load = layer.load();
        $.post("${basePath}/user/selectRoleByUserId", {id: id}, function (result) {
            layer.close(load);
            if (result && result.length) {
                var html = [];
                $.each(result, function () {
                    html.push("<div class='checkbox'><label>");
                    html.push("<input type='checkbox' id='");
                    html.push(this.id);
                    html.push("'");
                    if (this.check) {
                        html.push(" checked='checked'");
                    }
                    html.push("name='");
                    html.push(this.name);
                    html.push("'/>");
                    html.push(this.name);
                    html.push('</label></div>');
                });
                return so.id('boxRoleForm').html(html.join('')) & $('#selectRole').modal(), $('#selectUserId').val(id), !1;
            } else {
                return layer.msg('没有获取到用户数据，请先注册数据', so.default);
            }
        }, 'json');
    }
</script>
</html>